<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <base href="/">
    <title>Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="html/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CLato%7CKalam:300,400,700">
    <link rel="stylesheet" href="html/css/bootstrap.css">
    <link rel="stylesheet" href="html/css/fonts.css">
    <link rel="stylesheet" href="html/css/style.css">
    <style>
      .ie-panel{display: none;background: #212121;padding: 10px 0;box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3);clear: both;text-align:center;position: relative;z-index: 1;} html.ie-10 .ie-panel, html.lt-ie-10 .ie-panel {display: block;}

      /* 顶级分类样式 */
      .rd-nav-item {
        position: relative;
        display: inline-block;
        padding: 10px 20px;
        cursor: pointer;
      }

      /* 子分类容器样式 */
      .sub-category-list {
        display: none; /* 默认隐藏 */
        position: absolute;
        top: 100%; /* 显示在顶级分类下方 */
        left: 0;
        background-color: #fff;
        border: 1px solid #ddd;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        min-width: 150px;
      }

      /* 鼠标悬停时显示子分类 */
      .rd-nav-item:hover .sub-category-list {
        display: block;
      }

      /* 子分类项样式 */
      .rd-dropdown-item {
        padding: 8px 16px;
        list-style: none;
      }

      .rd-dropdown-item a {
        color: #333;
        text-decoration: none;
      }

      .rd-dropdown-item:hover {
        background-color: #f5f5f5;
      }

      /* 商品卡片样式 */
      .product-card {
        margin-bottom: 30px;
        transition: transform 0.3s;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        border-radius: 8px;
        overflow: hidden;
      }

      .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
      }

      .product-image-container {
        height: 200px;
        overflow: hidden;
        position: relative;
      }

      .product-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s;
      }

      .product-card:hover .product-image {
        transform: scale(1.05);
      }

      .product-info {
        padding: 15px;
        background-color: #fff;
      }

      .product-title {
        height: 48px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 10px;
        font-weight: 600;
      }

      .product-price {
        color: #ff6b6b;
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 10px;
      }

      .product-description {
        height: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        color: #666;
        margin-bottom: 15px;
      }

      .product-button {
        display: block;
        width: 100%;
        padding: 8px 0;
        background-color: #76aa6f;
        color: white;
        text-align: center;
        border-radius: 4px;
        transition: background-color 0.3s;
        text-decoration: none;
      }

      .product-button:hover {
        background-color: #5a8a54;
      }
    </style>

  </head>
  <body>
    <div class="ie-panel"><a href="http://windows.microsoft.com/en-US/internet-explorer/"><img src="html/images/ie8-panel/warning_bar_0000_us.jpg" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."></a></div>
    <div class="preloader">
      <div class="preloader-body">
        <div class="cssload-bell">
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="page">
      <!-- Page Header-->
      <header class="section page-header page-header-corporate">
        <!-- RD Navbar-->
        <div class="rd-navbar-wrap">
          <nav class="rd-navbar rd-navbar-corporate" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fixed" data-md-device-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-fixed" data-xl-layout="rd-navbar-static" data-xl-device-layout="rd-navbar-static" data-xxl-layout="rd-navbar-static" data-xxl-device-layout="rd-navbar-static" data-lg-stick-up-offset="154px" data-xl-stick-up-offset="182px" data-xxl-stick-up-offset="214px" data-lg-stick-up="true" data-xl-stick-up="true" data-xxl-stick-up="true">
            <div class="rd-navbar-collapse-toggle rd-navbar-fixed-element-1" data-rd-navbar-toggle=".rd-navbar-collapse"><span></span></div><a class="rd-navbar-basket rd-navbar-basket-mobile fl-bigmug-line-shopping202 rd-navbar-fixed-element-2" href="cart-page.html"><span>2</span></a>
            <div class="rd-navbar-aside-outer">
              <div class="rd-navbar-aside">
                <p>Opening hours: Monday - Friday: 08AM-06PM</p>
                <div>
                  <div class="group-xs group-middle">
                    <p class="rd-navbar-basket-text">Cart</p>
                    <!-- RD Navbar Basket-->
                    <div class="rd-navbar-basket-wrap">
                      <button class="rd-navbar-basket fl-bigmug-line-shopping202" data-rd-navbar-toggle=".cart-inline"><a class="rd-nav-link" href="shopping/cart">2</a>></button>

                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="rd-navbar-main-outer">
              <div class="rd-navbar-main">
                <div class="rd-navbar-main-element">
                  <!-- RD Navbar Panel-->
                  <div class="rd-navbar-panel">
                    <!-- RD Navbar Toggle-->
                    <button class="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap"><span></span></button>
                    <!-- RD Navbar Brand-->
                    <div class="rd-navbar-brand">
                      <!--Brand--><a class="brand" href="index.html"><img class="brand-logo-dark" src="html/images/logo-default-5-286x124.png" alt="" width="143" height="62"/><img class="brand-logo-light" src="html/images/logo-inverse-5-286x124.png" alt="" width="143" height="62"/></a>
                    </div>
                  </div>
                  <div class="rd-navbar-collapse">
                    <ul class="contacts-amber">
                      <li><a href="#">523 Sylvan Ave, 5th Floor<br/>Mountain View, CA 94041 USA</a></li>
                      <li><a href="tel:#">+1 (844) 123 456 78</a><br/><a href="mailto:#">info@demolink.org</a></li>
                    </ul>
                  </div>
                </div>
                <div class="rd-navbar-nav-wrap">

                  <ul class="rd-navbar-nav"   id="categorylist1"  style="justify-content: center; width: 100%;">
                    <li class="rd-nav-item active"><a class="rd-nav-link" href="shopping/index">Home</a>
                    </li>

                    <li class="rd-nav-item"><a class="rd-nav-link" href="shopping/shop"><span>Shop</span></a>

                    </li>

                    </li>
                    <li class="rd-nav-item"><a class="rd-nav-link" href="shopping/login">LOGIN</a>
                    </li>
                    </li>
                    <li class="rd-nav-item"><a class="rd-nav-link" href="system/login">ADMIN LOGIN</a>
                    </li>
                    </li>
                    <li class="rd-nav-item"><a class="rd-nav-link" href="shopping/personalinformation?tab=personal-info">个人信息</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </header>
       <!--Swiper-->
      <!--<section class="section swiper-container swiper-slider swiper-slider-6 swiper-nav-1" data-loop="true">
        <div class="swiper-wrapper text-sm-left">
          <div class="swiper-slide" data-slide-bg="html/images/slide-1.jpg">
            <div class="swiper-slide-caption section-md">
              <div class="container"  id="categorylist"  style="justify-content: center; width: 100%;">
                <div class="swiper-box">
                  <h5 class="swiper-title-3" data-caption-animate="fadeInRight" data-caption-delay="200">Providing quality products</h5>
                  <h2 class="swiper-title-1" data-caption-animate="fadeInLeft" data-caption-delay="100">Organic Fruits</h2>
                  <h3 class="swiper-title-2" data-caption-animate="fadeInRight" data-caption-delay="200">100% healthy &<br>affordable</h3>
                  <div class="button-wrap" data-caption-animate="fadeInUp" data-caption-delay="300"><a class="button button-lg button-shadow-2 button-primary button-zakaria" href="shopping/shop">Shop now</a></div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide" data-slide-bg="html/images/slide-2.jpg">
            <div class="swiper-slide-caption section-md">
              <div class="container">
                <div class="swiper-box">
                  <h5 class="swiper-title-3" data-caption-animate="fadeInRight" data-caption-delay="200">Summer discounts up to 40%</h5>
                  <h2 class="swiper-title-1" data-caption-animate="fadeInLeft" data-caption-delay="100">A Wide Variety</h2>
                  <h3 class="swiper-title-2" data-caption-animate="fadeInRight" data-caption-delay="200">Of Different<br>Fruits</h3>
                  <div class="button-wrap" data-caption-animate="fadeInUp" data-caption-delay="300"><a class="button button-lg button-shadow-2 button-primary button-zakaria" href="shopping/shop">Shop now</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>-->
        <!-- Swiper Pagination-->
        <!--<div class="swiper-pagination"></div>-->
        <!-- Swiper Navigation-->
       <!-- <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </section>-->
      <!--<section class="section bg-default">-->
        <!-- Owl Carousel-->
        <!--<div class="owl-carousel owl-style-13" data-items="1" data-sm-items="2" data-lg-items="3" data-xxl-items="4" data-dots="true" data-mouse-drag="false">-->
          <!-- Product Dawn--><!--<a class="product-dawn product-dawn-bg-1" href="shopping/shop">-->
            <!--<div class="unit unit-spacing-0 align-items-center">
              <div class="unit-left">
                <div class="product-dawn-figure"><img src="html/images/product-1-234x362.png" alt="" width="234" height="362"/>
                </div>
              </div>
              <div class="unit-body">
                <div class="product-dawn-title">
                  <div class="heading-3 product-dawn-title-big">Order</div>
                  <div class="heading-5 product-dawn-title-small">Our fruit box</div>
                </div>
                &lt;!&ndash;<div class="product-dawn-price">From $89.00</div>&ndash;&gt;
                <div class="button button-sm button-icon-3 product-dawn-button"><span class="mdi mdi-arrow-right"></span></div>
              </div>
            </div></a>-->
          <!-- Product Dawn--><!--<a class="product-dawn product-dawn-bg-2" href="shopping/shop">-->
            <!--<div class="unit unit-spacing-0 align-items-center">
              <div class="unit-left">
                <div class="product-dawn-figure"><img src="html/images/product-2-200x362.png" alt="" width="200" height="362"/>
                </div>
              </div>
              <div class="unit-body">
                <div class="product-dawn-title">
                  <div class="heading-3 product-dawn-title-big">Fresh</div>
                  <div class="heading-5 product-dawn-title-small">Smoothies</div>
                </div>-->
                <!--<div class="product-dawn-price">From $12.00</div>-->
               <!-- <div class="button button-sm button-icon-3 product-dawn-button"><span class="mdi mdi-arrow-right"></span></div>
              </div>
            </div></a>-->
          <!-- Product Dawn-->
     <!-- <a class="product-dawn product-dawn-bg-3" href="shopping/shop">
            <div class="unit unit-spacing-0 align-items-center">
              <div class="unit-left">
                <div class="product-dawn-figure"><img src="html/images/product-3-220x362.png" alt="" width="220" height="362"/>
                </div>
              </div>
              <div class="unit-body">
                <div class="product-dawn-title">
                  <div class="heading-3 product-dawn-title-big">New</div>
                  <div class="heading-5 product-dawn-title-small">Summer offers</div>
                </div>-->
                <!--<div class="product-dawn-price">From $21.00</div>-->
                <!--<div class="button button-sm button-icon-3 product-dawn-button"><span class="mdi mdi-arrow-right"></span></div>
              </div>
            </div></a>-->
          <!-- Product Dawn--><!--<a class="product-dawn product-dawn-bg-4" href="shopping/shop">-->
            <!--<div class="unit unit-spacing-0 align-items-center">
              <div class="unit-left">
                <div class="product-dawn-figure"><img src="html/images/product-4-195x362.png" alt="" width="195" height="362"/>
                </div>
              </div>
              <div class="unit-body">
                <div class="product-dawn-title">
                  <div class="heading-3 product-dawn-title-big">Shop</div>
                  <div class="heading-5 product-dawn-title-small">new arrivals</div>
                </div>-->
                <!--<div class="product-dawn-price">From $18.00</div>-->
              <!--  <div class="button button-sm button-icon-3 product-dawn-button"><span class="mdi mdi-arrow-right"></span></div>
              </div>
            </div></a>
        </div>
      </section>-->
      <!-- 商品展示区域 -->
      <section class="section bg-default">
        <div class="container">
          <h2 class="text-center mb-5"></h2>
          <div class="row" id="productContainer">
            <!-- 商品将通过JavaScript动态加载 -->
          </div>
        </div>
      </section>
    </div>
    </div>
    <div class="snackbars" id="form-output-global"></div>
    <script src="html/js/core.min.js"></script>
    <script src="html/js/script.js"></script>
    <script src="layui/layui.all.js"></script>



    <script id="categoryitem" type="text/html">
      <li class="rd-nav-item">
        <a class="rd-nav-link" href="shopping/shop"></a>
        <ul class="sub-category-list"></ul>
      </li>
    </script>

    <!-- 子分类模板 -->
    <script id="categorychild" type="text/html">
      <li class="rd-dropdown-item">
        <a class="rd-dropdown-link" href="shopping/shop">
          <span class="sub-category-name"></span>
          <img class="sub-category-image" src="" alt="" style="width: 20px; height: 20px;">
        </a>
      </li>
    </script>

    <script src="layui/layui.all.js"></script>

    <script>
      const $=layui.$;

      // 加载分类数据
      $.ajax({
        url:'category/getchildren',
        data:{parentid:-1},
        success:function(result){
          for(let i=0;i<result.length;i++){
            // 克隆顶级分类模板
            let item = $("#categoryitem").html();
            let $item = $(item);

            // 设置顶级分类的名称
            $item.find("a").text(result[i].name);
            // 获取子分类
            $.ajax({
              url: "category/getchildren",
              data: { parentid: result[i].cateid },
              success: function(res) {
                console.log(res);
                let $ul = $item.find(".sub-category-list");
                for (let j = 0; j < res.length; j++) {
                  // 克隆子分类模板
                  let childtext = $("#categorychild").html();
                  let $child = $(childtext);

                  // 设置子分类的名称和图片
                  $child.find(".sub-category-name").text(res[j].name);
                  $child.find(".sub-category-image").attr("src", res[j].imgurl);

                  // 将子分类添加到子分类容器中
                  $ul.append($child);
                }
              }
            });
            // 将顶级分类添加到页面
            $("#categorylist").append($item);
            $("#categorylist1").append($item);
          }
        }
      });

      // 页面加载完成后执行
      $(document).ready(function() {
        // 加载商品数据
        loadProducts();
      });

      // 加载商品数据
      function loadProducts() {
        $.ajax({
          url: '/product/list',
          type: 'GET',
          data: {
            page: 1,  // 添加页码参数，从第1页开始
            limit: 8  // 限制显示8个商品
          },
          success: function(response) {
            if (response.code === 0 && response.data) {
              renderProducts(response.data);
            } else {
              $('#productContainer').html('<div class="col-12 text-center">暂无商品数据</div>');
            }
          },
          error: function(xhr) {
            console.error('加载商品失败:', xhr.responseText);
            $('#productContainer').html('<div class="col-12 text-center">加载商品失败，请稍后重试</div>');
          }
        });
      }

      // 渲染商品列表
      function renderProducts(products) {
        const $container = $('#productContainer');
        $container.empty();

        products.forEach(product => {
          const productCard = `
            <div class="col-md-3 col-sm-6">
            <a href="shopping/shop?id=${product.productid}" style="text-decoration: none; color: inherit;">
              <div class="product-card">
                <div class="product-image-container">
                  <img src="${product.imgurl || 'html/images/product-placeholder.jpg'}" alt="${product.name}" class="product-image">
                </div>
                <div class="product-info">
                  <h5 class="product-title">${product.name}</h5>
                  <div class="product-price">¥${product.price.toFixed(2)}</div>
                  <a href="shopping/product?id=${product.productid}" class="product-button">查看详情</a>
                </div>
              </div>
              </a>
            </div>
          `;

          $container.append(productCard);
        });
      }
    </script>




  </body>
</html>